<template>
  <div class="share-page">
    <div class="nav-bar" style="background: #FFFFFF">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
        <div class="flex-row-v-center" style="padding-left: 10px; width: 40px">
          <img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left.png"
               @click="onClickGoBack()"/>
        </div>
        <div class="flex-1 flex-center">
          <span style="font-size: 18px; color:#000000">分享收益</span>
        </div>
        <div style="width: 40px"></div>
      </div>
    </div>
    <div class="share-container" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="share-content">
        <div class="share-top flex-center">
          <div class="money-box flex-col-v-center">
            <label class="money-box-top">个人总收益</label>
            <label class="money-box-bottom">￥0</label>
          </div>
          <img src="/static/assets/img/share-top.png" class="share-top-img"/>
        </div>
        <div class="switch-bar flex-row">
          <div class="flex-1 switch-item" :class="{'current-status': currentStatus === 1}" @click="switchStatus(1)">
            <div class="text">
              我的分享
            </div>

            <div class="switch-bottom"></div>
          </div>
          <div class="flex-1 switch-item" :class="{'current-status': currentStatus === 2}" @click="switchStatus(2)">
            <div class="text">
              我看过的
            </div>
            <div class="switch-bottom"></div>
          </div>
        </div>

        <div class="empty-div flex-col-v-center">
          <img src="/static/assets/img/empty-share.png" class="empty-img"/>
          <label class="empty-text">你还没有分享哦</label>
          <div class="btn flex-center">去分享</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import global from 'global'
  import Core from 'core'

  export default {
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        currentStatus: 1

      }
    },

    methods: {
      switchStatus (status) {
        this.currentStatus = status
      },

      onClickGoBack () {
        Core.Util.goBack()
      }

    }
  }
</script>

<style lang="scss" scoped>
  .share-page {
    background: #f9f9f9;
    height: 100%;

    .share-container {
      height: 100%;
      .empty-div {
        margin-top: 30%
      }
      .empty-img {
        width: 162px;
        height: 96px;
        margin-bottom: 10px;
      }
      .empty-text {
        margin-bottom: 20px;
        color: #939393;
        font-size: 16px;
      }
      .btn {
        border-radius: 35px;
        background: #0EC5A9;
        width: 115px;
        height: 35px;
        color: #ffffff;
      }

      .share-top {
        position: relative;
        height: 124px;
        .share-top-img {
          position: absolute;
          width: 100%;
          height: 124px;
          top: 0;
          left: 0;
          z-index: 1;
        }
        .money-box {
          position: relative;
          z-index: 2;
          color: #ffffff;
          .money-box-top {
            font-size: 16px;
          }
          .money-box-bottom {
            font-size: 30px;
          }
        }
      }
      .switch-bar {
        width: 100%;
        height: 48px;
        background: #ffffff;
        .switch-item {
          .text {
            text-align: center;
            height: 46px;
            line-height: 46px;
          }
          .switch-bottom {
            height: 2px;
            background: #ffffff;
            width: 100%;
          }
        }
        .current-status {
          .text {
            color: #0DC5A9;
          }
          .switch-bottom {
            background: #0DC5A9;
          }
        }
      }

    }

    .bg-white {
      background: white;
    }

  }
</style>
